<template>
	<view class="recorder">
		<view class="re-top" v-if="showTop">
			<view class="re-cancel" @click="cancel">取消</view>
			<view class="re-confirm" :style="{color: theme}" @click="confirm">{{ confirmText }}</view>
		</view>
		<text class="title">{{ finish ? '点击播放' : '长按录制语音' }}</text>
		<view class="recorder-box" v-if="!finish" @click="handle" @longpress="onStartRecoder" @touchend="onEndRecoder">
			<u-circle-progress :active-color="theme" :duration="0" :percent="calcProgress">
				<view class="u-progress-content">
					<image :src="voice" mode="aspectFit" :style="{
            width: width,
            height: height
          }"></image>
				</view>
			</u-circle-progress>
		</view>
		<view class="recorder-box" v-else @click="playVoice">
			<u-circle-progress :active-color="theme" :duration="0" :percent="playProgress">
				<view class="u-progress-content">
					<image :src="play" mode="aspectFit" :style="{
            width: width,
            height: height
          }" v-if="!playStatus"></image>
					<image :src="pause" mode="aspectFit" :style="{
            width: width,
            height: height
          }" v-else></image>
				</view>

			</u-circle-progress>
		</view>
		<text class="now-date">{{ reDate }}</text>
		<view @click="reset">重新录制</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import uCircleProgress from '../u-circle-progress/u-circle-progress.vue'
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		components: {
			uCircleProgress
		},
		props: {
			width: {
				type: String,
				default: '60rpx'
			},
			height: {
				type: String,
				default: '60rpx'
			},
			showTop: {
				type: Boolean,
				default: true
			},
			maximum: {
				type: [Number, String],
				default: 15
			},
			duration: {
				type: Number,
				default: 20
			},
			theme: {
				type: String,
				default: '#32b99d'
			},
			confirmText: {
				type: String,
				default: '完成'
			}
		},
		data() {
			return {
				voice:this.$img.voice,
				play:this.$img.play,
				pause:this.$img.pause,
				current: {

					src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
				},
				reDate: '00:00',
				sec: 0,
				min: 0,
				finish: false,
				voicePath: '',
				playProgress: 100,
				playTimer: null,
				timer: null,
				playStatus: false
			};
		},
		created() {
			// 监听
			this.onMonitorEvents()
		},
		computed: {
			// 录制时间计算
			calcProgress() {
				return (this.sec + (this.min * 60)) / this.maximum * 100
			}
		},
		methods: {
			// 完成事件
			confirm() {
				if (!innerAudioContext.paused) {
					innerAudioContext.stop()
				}

				if(this.voicePath){
					uni.uploadFile({
						url: this.$api.upload,
						filePath: this.voicePath,
						name: 'file',
					
						header: null,
						success: uploadRes => {
							console.log('uploadRes-------------',
								uploadRes, 'this.formData', this
								.formData,
								'this.uploadServerUrl', this
								.uploadServerUrl);
							/* 阿里云上传 */
					
					
							/* 七牛云上传 */
							uploadRes = JSON.parse(uploadRes.data);
					
							if (uploadRes.code != 0) {
								// console.log('进入失败uploadRes', uploadRes);
								uni.showToast({
									title: '上传失败 : ' +
										uploadRes.data,
									icon: 'none'
								});
								
							} else {
								this.voicePath = uploadRes.data.url
					           
								this.$emit('confirm', this.voicePath)
							}
					
						},
						fail: e => {
							uni.showToast({
								title: '上传录音失败',
								icon: 'none'
							});
							
						}
					});
				}else{
					this.$emit('confirm', this.voicePath)
				}




			},
			// 取消事件
			cancel() {
				if (!innerAudioContext.paused) {
					innerAudioContext.stop()
				}
				this.$emit('cancel')
			},
			palyAudio() {

			},
			// 点击事件
			handle() {
				this.$emit('click')
			},
			// 重新录制
			reset() {
				this.voicePath = ''
				this.min = 0
				this.sec = 0
				this.reDate = '00:00'
				this.playProgress = 100
				this.finish = false
				this.$emit('reset')
			},
			// 播放暂停录音
			playVoice() {
				innerAudioContext.src = this.voicePath;

				if (innerAudioContext.paused) {
					innerAudioContext.play()
					this.playStatus = true
				} else {
					innerAudioContext.stop();
				}
				this.$emit('playVoice', innerAudioContext.paused)
			},
			// 录制结束
			onEndRecoder() {
				recorderManager.stop()
			},
			// 开始录制
			onStartRecoder() {
				console.log('11')
				recorderManager.start({
					duration: this.maximum * 1000
				})
			},
			// 监听
			onMonitorEvents() {
				// 录制开始
				recorderManager.onStart(() => {
					uni.showLoading({
						title: '录制中...'
					})
					this.startDate()
					this.$emit('start')
				})
				// 录制结束
				recorderManager.onStop(({
					tempFilePath
				}) => {
					console.log(tempFilePath)
					this.voicePath = tempFilePath
					clearInterval(this.timer)
					uni.hideLoading()
					this.finish = true
					this.$emit('end')
				})
				// 播放进度
				innerAudioContext.onTimeUpdate(() => {
					let totalDate = innerAudioContext.duration
					let nowTime = innerAudioContext.currentTime
					let surplus = totalDate - nowTime
					this.playProgress = surplus / totalDate * 100

					let _min = Math.floor(surplus / 60)
					if (_min < 10) _min = '0' + _min;
					let _sec = Math.floor(surplus % 60)
					if (_sec < 10) _sec = '0' + _sec;
					this.reDate = _min + ':' + _sec
				})
				// 播放暂停
				innerAudioContext.onPause(() => {
					this.resetDate()
					this.playProgress = 100
					this.playStatus = false
					console.log('播放暂停')
					this.$emit('stop')
				})
				// 播放停止
				innerAudioContext.onStop(() => {
					this.resetDate()
					this.playProgress = 100
					this.playStatus = false
					console.log('播放停止')
					this.$emit('stop')
				})
			},
			// 录音计时
			startDate() {
				clearInterval(this.timer)
				this.sec = 0
				this.min = 0
				this.timer = setInterval(() => {
					this.sec += this.duration / 1000
					if (this.sec >= 60) {
						this.min++
						this.sec = 0
					}
					this.resetDate()
				}, this.duration)
			},
			// 播放时间
			resetDate() {
				let _s = this.sec < 10 ? '0' + parseInt(this.sec) : parseInt(this.sec)
				let _m = this.min < 10 ? '0' + this.min : this.min
				this.reDate = _m + ':' + _s
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recorder {
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		font-size: 24rpx;
		width: 100%;

		.re-top {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
			width: 100%;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.title {
			font-size: 36rpx;
			color: #333;
			padding: 20rpx 0 30rpx;
		}

		.recorder-box {
			position: relative;
		}

		.now-date {
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>